{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from "macros.html" import sub_nav with context %}
{% from "macros-protocol.html" import callout_compact with context %}

{% extends "firefox/base/base-protocol.html" %}

{% block page_title %}{{ ftl('browser-history-browser-history') }}{% endblock %}

{% block page_desc %}
  {{ ftl('browser-history-the-browser-wars-underdogs-giants') }}
{% endblock %}

{% block page_css %}
  {{ css_bundle('protocol-callout') }}
  {{ css_bundle('protocol-article') }}
  {{ css_bundle('browser-history') }}
{% endblock %}

{% block sub_navigation %}
  {% if ftl_has_messages('sub-navigation-firefox', 'sub-navigation-what-is-a-browser', 'sub-navigation-browsing-history') %}
    {{ sub_nav(
      title={
        'text':  ftl('sub-navigation-firefox'),
        'href':  "https://www.firefox.com/?redirect_source=mozilla-org",
        'icon':  static('protocol/img/logos/firefox/browser/logo.svg'),
        'cta_name': 'Firefox'
      },
      links=[
        {
          'text':  ftl('sub-navigation-what-is-a-browser'),
          'href':  url('firefox.browsers.what-is-a-browser'),
          'cta_name': 'What Is a Browser?'
        },
        {
          'text': ftl('sub-navigation-browsing-history'),
          'href': 'https://support.mozilla.org/kb/browsing-history-firefox/?utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=browser-history',
          'cta_name': 'Browsing History'
        }
      ]
    ) }}
  {% endif %}
{% endblock %}

{% block content %}
  <div class="mzp-l-content">
  <article class="mzp-c-article">

    <h1 class="mzp-c-article-title">{{ ftl('browser-history-the-history-of-web') }}</h1>
    <p class="mzp-c-article-intro">{{ ftl('browser-history-world-history-is') }}</p>

    {{ download_firefox_thanks(dom_id='download-button-primary', download_location='primary') }}

    <img src="{{ static('img/firefox/browsers/browser-history/browser-history-a.png') }}" alt="" class="c-article-image" width="954" height="372">

    <h2 class="c-section-title">{{ ftl('browser-history-before-web-era') }}</h2>

    <p>{{ ftl('browser-history-in-1950-computers') }}</p>

    <p>{{ ftl('browser-history-arpanet-was-the', arpanet='https://en.wikipedia.org/wiki/ARPANET') }}</p>

    <p>{{ ftl('browser-history-that-sparked-a-revolution') }}</p>

    <h2 class="c-section-title">{{ ftl('browser-history-web-era') }}</h2>

    <p>{{ ftl('browser-history-british-computer', cern='https://home.cern/topics/birth-web') }}</p>

    <p>{{ ftl('browser-history-a-year-later-berners') }}</p>

    <p>{{ ftl('browser-history-by-1993-the-web', firefox='https://en.wikipedia.org/wiki/Firefox') }}</p>

    <p>{{ ftl('browser-history-ncsa-mosaic-ran', netscape='https://en.wikipedia.org/wiki/Netscape_(web_browser)') }}</p>

    <h2 class="c-section-title">{{ ftl('browser-history-the-browser-wars') }}</h2>

    <p>{{ ftl('browser-history-by-1995-netscape', ie='https://en.wikipedia.org/wiki/Internet_Explorer') }}</p>

    <p>{{ ftl('browser-history-netscape-created', blink='https://developer.mozilla.org/en-US/docs/Glossary/blink_element') }}</p>

    <p>{{ ftl('browser-history-things-got-a-little', dino='https://medium.com/@ddprrt/tales-from-the-browser-wars-mozilla-stomps-internet-explorer-799035887cb1') }}</p>

    <p>{{ ftl('browser-history-then-microsoft-began', mozilla='https://en.wikipedia.org/wiki/Mozilla', marketshare='https://en.wikipedia.org/wiki/Internet_Explorer#Market_adoption_and_usage_share') }}</p>

    <p>{{ ftl('browser-history-other-competitors') }}</p>

    <img src="{{ static('img/firefox/browsers/browser-history/browser-history-b.png') }}" alt="" class="c-article-image" width="954" height="372">

    <h2 class="mzp-c-article-title">{{ ftl('browser-history-browsing-the-web') }}</h2>

    <p>{{ ftl('browser-history-today-there-are', applications='https://blog.mozilla.org/firefox/no-judgment-digital-definitions-app-vs-web-app/') }}</p>

    <p>{{ ftl('browser-history-in-the-future-the-v2') }}</p>

    <p>{{ ftl('browser-history-whatever-the-future') }}</p>

    <h3 class="c-section-title">{{ ftl('browser-history-resources') }}</h3>

    <ul class="mzp-u-list-styled">
      <li><a href="https://en.wikipedia.org/wiki/Mosaic_(web_browser)">https://en.wikipedia.org/wiki/Mosaic_(web_browser)</a></li>
      <li><a href="https://en.wikipedia.org/wiki/History_of_the_web_browser">https://en.wikipedia.org/wiki/History_of_the_web_browser</a></li>
      <li><a href="https://en.wikipedia.org/wiki/History_of_the_Internet">https://en.wikipedia.org/wiki/History_of_the_Internet</a></li>
      <li><a href="https://en.wikipedia.org/wiki/Browser_wars">https://en.wikipedia.org/wiki/Browser_wars</a></li>
      <li><a href="https://home.cern/topics/birth-web">https://home.cern/topics/birth-web</a></li>
      <li><a href="https://www.zdnet.com/article/before-the-web-the-internet-in-1991/">https://www.zdnet.com/article/before-the-web-the-internet-in-1991/</a></li>
    </ul>

  </article>
</div>

{% call callout_compact(
  title=ftl('browser-history-take-control-of'),
  class='mzp-t-product-firefox mzp-t-firefox'
) %}
  <div class="download-firefox">
    {{ download_firefox_thanks(dom_id='download-button-secondary', download_location='secondary') }}
  </div>
{% endcall %}

{% endblock %}

{% block js %}{% endblock %}
